<template>
  <div>
        <el-upload
          v-show="false"
          class="upload-demo"
          action="#"
          list-type="picture"
          accept="image/png,image/jpg,image/jpeg"
          :http-request="handleProgress"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          ref="ImgRef"
        >
          <el-button id="uploadEditor" ref="upload" size="small" type="primary">点击上传</el-button>
        </el-upload>
        <quill-editor  v-model="contents"   @change="textChange" ref="myQuillEditor" :options="quillOption"></quill-editor>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { Quill, quillEditor } from "vue-quill-editor";
import quillConfig from "../util/quill-config.js";
import config from "../util/config"
import {pictureByBase64} from "../api/index"
import getBase64  from "../util/base64"
export default {
  props:["value","content"],
  components: {
    quillEditor
  },
  data() {
    return {
      action:config.picture,
      contents:"",
      quillOption: quillConfig,
    };
  },
  watch:{
    content:function(newVal,oldVal){
       this.contents =newVal
    }
  },
  computed:{

  },
  created(){
  },
  mounted() {
    quillConfig.register(Quill);
    quillConfig.initButton();
   
  },
  created() {
  },
  methods: {
    textChange() {
      this.$emit("textChange", this.contents);
    },
    // 删除图片
    handleRemove(){
    },
    beforeAvatarUpload(file){
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 上传图片
    async handleProgress(data){
      let base64=await getBase64(data.file)
      let filename=data.file.name
      const res=await pictureByBase64({filename,base64})
      if(res.code !==200) return this.$message.error("上传图片失败")
      this.$refs.ImgRef.clearFiles()
      this.contents+=`<img src="${res.data.path}">`
    }
  }
};
</script>

<style lang="less" scoped>
.el-card{
  padding-bottom: 20px;
}
.el-tag {
  margin-bottom: 20px;
}
.ql-editor{
  height: 500px;
  overflow: hidden;
}
.quill-editor {
  height: 400px;
  padding-bottom: 50px;
}
</style>
